<script setup lang="ts">
import { AliwangwangOutlined, CopyOutlined } from '@ant-design/icons-vue';
import { storeToRefs } from 'pinia';

import { errimage } from '#/base';
import { guanlianprdStore, link1688stor } from '#/store';
import { copyToClipboard, formatMoney, toFixed2 } from '#/utils';

defineProps({
  orderInfo: {
    type: Object,
    default: () => ({}),
  },
});
const $emit = defineEmits(['update1688SourceFn']);
// const orderInfo = orderInfo;
function gotoAliiwanwan(name: string) {
  open(
    encodeURI(
      `https://air.1688.com/app/ocms-fusion-components-1688/def_cbu_web_im/index.html?touid=cnalichn${name}&siteid=cnalichn#/`,
    ),
  );
}
function gouto1688url(id: string) {
  id && open(encodeURI(`https://detail.1688.com/offer/${id}.html`));
}
const guanlianprd = guanlianprdStore();
const { showaddimgstatus } = storeToRefs(guanlianprd);
const link1688 = link1688stor();
function openUseLinkBox(record: any) {
  link1688.getDeteail(record);
  link1688.showIsLinkBindStatus = true;
}
function openshowAddUseImage(record: any) {
  // guanlianprd.$reset();
  guanlianprd.setShopData({
    shopName: record.shopName,
    shopId: record.shopId,
  });
  guanlianprd.setSelectGetImageItemsData([record]);
  showaddimgstatus.value = true;
}
</script>

<template>
  <div>
    <a-space v-if="orderInfo.offerId" :size="0" direction="vertical">
      <a-space v-if="0" :size="2">
        <div class="text-sm">店铺订单号：</div>
        <div class="text-xs text-gray-500">
          {{ orderInfo.dyOrderId }}
        </div>
        <a-button
          shape="round"
          type="link"
          @click="
            () => {
              copyToClipboard(orderInfo.dyOrderId);
            }
          "
        >
          <template #icon>
            <CopyOutlined class="text-xs" />
          </template>
        </a-button>
      </a-space>
      <a-divider v-if="0" style="margin: 0" />
      <a-space align="start" class="mt-2">
        <a-space direction="vertical">
          <a-image
            :fallback="errimage"
            :src="orderInfo.goodsInfo.specPic || 'err'"
            :width="60"
            style="border-radius: 8px"
          />
          <is-miwen :list="orderInfo.supportChannels" />
        </a-space>
        <a-space :size="0" direction="vertical">
          <a-space>
            <a-tooltip>
              <template #title>{{ orderInfo.goodsInfo.goodsTitle }}</template>
              <div
                class="w-52 cursor-pointer truncate"
                @click="() => gouto1688url(orderInfo.offerId)"
              >
                {{ orderInfo.goodsInfo.goodsTitle }}
              </div>
            </a-tooltip>
            <a-button
              shape="round"
              size="small"
              type="link"
              @click="
                () => {
                  copyToClipboard(orderInfo.goodsTitle);
                }
              "
            >
              <template #icon>
                <CopyOutlined class="text-xs" />
              </template>
            </a-button>
          </a-space>
          <a-space>
            <span class="text-xs">供货商:</span>
            <a-tooltip>
              <template #title>
                {{ orderInfo.goodsInfo.wangwangAccount }}
              </template>
              <div
                class="cursor-pointer text-xs text-gray-500"
                @click="
                  () => {
                    gotoAliiwanwan(orderInfo.goodsInfo.wangwangAccount);
                  }
                "
              >
                {{ orderInfo.goodsInfo.wangwangAccount }}
              </div>
            </a-tooltip>
            <a-button
              shape="round"
              size="small"
              type="link"
              @click="
                () => {
                  copyToClipboard(orderInfo.goodsInfo.wangwangAccount);
                }
              "
            >
              <template #icon>
                <CopyOutlined class="text-xs" />
              </template>
            </a-button>
            <a-tooltip>
              <template #title>联系供货商</template>
              <a-button
                shape="round"
                size="small"
                type="link"
                @click="
                  () => {
                    gotoAliiwanwan(orderInfo.goodsInfo.wangwangAccount);
                  }
                "
              >
                <template #icon>
                  <AliwangwangOutlined />
                </template>
              </a-button>
            </a-tooltip>
          </a-space>
          <a-space v-if="0">
            <span class="text-xs">商品ID:</span>
            <span class="text-xs text-gray-500">{{ orderInfo.productId }}</span>
            <a-button
              shape="round"
              size="small"
              type="link"
              @click="
                () => {
                  copyToClipboard(orderInfo.productId);
                }
              "
            >
              <template #icon>
                <CopyOutlined class="text-xs" />
              </template>
            </a-button>
          </a-space>
          <a-space align="start">
            <div class="text-xs">订单规格:</div>
            <div class="w-48 text-xs text-gray-500">
              {{ orderInfo.goodsInfo.skuStr }}
            </div>
          </a-space>
          <a-space>
            <span class="text-xs">单价数量:</span>
            <a-space>
              <span> ¥ </span>
              <span> {{ formatMoney(orderInfo.goodsInfo.supplyPrice) }} X</span>
              <a-input-number
                id="inputNumber"
                :disabled="orderInfo.aliOrderStatus"
                :max="999"
                :min="1"
                :value="orderInfo.goodsInfo.aliQuantity"
                @change="
                  (e: any) => {
                    // eslint-disable-next-line vue/no-mutating-props
                    orderInfo.goodsInfo.aliQuantity = e;
                    $emit('update1688SourceFn', {
                      tbId: orderInfo.tbId,
                      aliQuantity: e,
                    });
                  }
                "
              />
              件
            </a-space>
          </a-space>
          <a-space>
            <span class="text-xs">预估支付:</span>
            <span class="text-base text-red-500">
              ¥{{
                toFixed2(
                  formatMoney(orderInfo.goodsInfo.supplyPrice) *
                    orderInfo.goodsInfo.aliQuantity,
                )
              }}
            </span>
          </a-space>
          <a-space v-if="orderInfo.errMsg">
            <span class="text-xs" style="color: red">{{
              orderInfo.errMsg
            }}</span>
          </a-space>
          <a-popover v-if="orderInfo.dyOrderStatus === 2" placement="bottom">
            <template #content>
              <a-space>
                <a-button
                  type="primary"
                  @click="() => openUseLinkBox(orderInfo)"
                >
                  链接关联
                </a-button>
                <a-button
                  type="primary"
                  @click="() => openshowAddUseImage(orderInfo)"
                >
                  同款推荐
                </a-button>
              </a-space>
            </template>
            <a-button style="padding: 0" type="link">更换货源 </a-button>
          </a-popover>
        </a-space>
      </a-space>
      <a-divider v-if="0" style="margin: 0" />
      <div v-if="0">
        <a-space :size="0" direction="vertical">
          <a-space>
            <div class="text-xs">买家信息:</div>
            <div class="w-64 text-xs text-gray-500">
              {{ orderInfo.buyerRemark || '买家未填写备注' }}
            </div>
          </a-space>
          <a-space>
            <div class="text-xs">商家备注:</div>
            <div class="w-64 text-xs text-gray-500">
              {{ orderInfo.remark || '未填写备注' }}
            </div>
          </a-space>

          <a-space align="start">
            <div class="text-xs">收货地址:</div>
            <div class="w-64 text-xs text-gray-500">
              {{ orderInfo.address }} {{ orderInfo.fullName }}
            </div>
          </a-space>
        </a-space>
      </div>
    </a-space>
    <div v-else>
      <nohuoyuan :record="orderInfo" />
    </div>
  </div>
</template>
